<!-- 刻度滑动选择 -->
<template>
	<scroll-view scroll-x class="slide-scroll ruler-scroll" :enable-flex="true" :show-scrollbar="false"
		:style="{width: screenW + 'px',height: height+'rpx', alignItems: align}" @scroll="slideScroll"
		:scroll-left="scrollLeft" @touchend="slideMoveEnd" :scroll-with-animation="true">
		
			<!-- 空白占位 -->
			<view class="empty-none" :style="{width: screenW /2 + 'px'}"></view>
			<!-- 列表项 -->
			<block v-for="(s_item, s_index) in list" :key="s_index">
				<view class="slide-list" :style="{width: bigItemWidth + 'px', margin: `0 ${(cellWidth - bigItemWidth)/2}px`, 
			backgroundColor: selInd === (s_index * cells) ? selColor : color,
			color: selInd === (s_index * cells) ? selColor : color,
			height: selInd === (s_index * cells) ?setUnit(40):setUnit(bigItemHeight)}">
					<view class="list-num"
						:style="{top: numPos === 'bottom' ? `calc(100% + 5rpx)` : 'auto', bottom: numPos === 'top' ? `calc(100% + 5rpx)` : 'auto',marginBottom:'20px'}">
						{{s_item}}
					</view>
				</view>
				<view class="slide-item" v-for="(c_item, c_index) in (cells - 1)" :key="c_item" :style="{width: littleItemWidth + 'px', margin: `0 ${(cellWidth - littleItemWidth)/2}px`, 
			backgroundColor: selInd === (s_index * cells + c_index + 1) ? selColor : color,
			height: selInd === (s_index * cells + c_index + 1) ? setUnit(40): setUnit(littleItemHeight)}"></view>
			</block>
			
			<!-- 空白占位 -->
			<view class="empty-none" :style="{width: screenW / 2 + 'px'}"></view>
			
		</view>
	
	</scroll-view>
</template>

<script>
export default {
  props: {
    width: { type: Number, default: 100 },
    height: { type: String, default: '' },
    bigItemWidth: { type: Number, default: 2 },
    littleItemWidth: { type: Number, default: 2 },
    cellWidth: { type: Number, default: 20 },
    cells: { type: Number, default: 5 },
    cellNum: { type: Number, default: 1 },
    startNum: { type: Number, default: 0 },
    endNum: { type: Number, default: 20 },
    bgColor: { type: String, default: 'transparent' },
    color: { type: String, default: '#666' },
    selColor: { type: String, default: '#f00' },
    align: { type: String, default: 'center' },
    bigItemHeight: { type: [String, Number], default: 30 },
    littleItemHeight: { type: [String, Number], default: 15 },
    numPos: { type: String, default: 'bottom' },
    value: { type: Number, default: 0 },
  },
  data() {
    return {
      scrollLeft: 0,
      list: [],
      selInd: 0,
    };
  },
  computed: {
    screenW() {
      const { width } = this;
      const screenWidth = uni.getSystemInfoSync().screenWidth;
      if (width <= 100 && width > 0) return Math.round(screenWidth * width / 100);
      if (width > screenWidth || !width) return screenWidth;
      return width;
    },
  },
  mounted() {
    this.initSlide();
    this.$nextTick(() => this.checkValueRange(this.value));
  },
  methods: {
    setUnit(u) {
      return typeof u === 'number' ? `${u}px` : u;
    },
    // 滚动时触发
    slideScroll(e) {
      const scrollL = e.detail.scrollLeft;
      let ind = parseInt(scrollL / this.cellWidth);
      const maxInd = (this.endNum - this.startNum) / this.cellNum;
      if (ind > maxInd) ind = maxInd;
      if (ind !== this.selInd) this.selInd = ind;
    },
    slideMoveEnd() {
      setTimeout(() => {
        this.slideTo(this.selInd);
        this.setEmitFunc();
      }, 120);
    },
    initSlide() {
      const { startNum, endNum, cellNum, cells } = this;
      const listNum = cellNum * cells;
      const len = (endNum - startNum) / listNum;
      this.list = Array.from({ length: len }, (_, i) => this.getIntNum(startNum + i * listNum));
      this.getSelInd();
    },
    getIntNum(n) {
      return parseInt(n * 100) / 100;
    },
    getSelInd() {
      let value = this.value;
      const { startNum, endNum, cellNum } = this;
      // 🔹 判断是否超出范围
      if (value < startNum) value = startNum;
      if (value > endNum) value = endNum;
      const d_len = (endNum - startNum) / cellNum;
      let defaultInd = 0;
      for (let d = 0; d <= d_len; d++) {
        const item = this.getIntNum(startNum + d * cellNum);
        if (item === value) {
          defaultInd = d;
          break;
        }
      }
      this.selInd = defaultInd;
      this.slideTo(defaultInd);
    },
    slideTo(ind) {
      const newLeft = ind * this.cellWidth + this.cellWidth / 2;
      this.scrollLeft = newLeft;
    },
    setEmitFunc() {
      const num = this.getIntNum(this.selInd * this.cellNum + this.startNum);
      this.$emit('input', num);
      this.$emit('change', num);
    },
    // ✅ 检查 v-model 是否超出范围
    checkValueRange(val) {
      const { startNum, endNum } = this;
      if (val < startNum) {
        this.$emit('input', startNum);
        this.$emit('change', startNum);
        this.getSelInd();
      } else if (val > endNum) {
        this.$emit('input', endNum);
        this.$emit('change', endNum);
        this.getSelInd();
      }
    },
  },
  watch: {
    value(newVal) {
      this.checkValueRange(newVal);
      this.getSelInd();
    },
  },
};
</script>
<style >	
	/deep/::-webkit-scrollbar {
	      display: none;
	      width: 0;
	      height: 0;
	}
	
 .slide-scroll::-webkit-scrollbar {
			/* 隐藏滚动条，但依旧具备可以滚动的功能 */
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			}
	
	/deep/ .slide-scroll::-webkit-scrollbar {
			/* 隐藏滚动条，但依旧具备可以滚动的功能 */
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}
	
	.slide-scroll {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.slide-list {
		flex-shrink: 0;
		position: relative;
		border-radius: 4px;
		transition: background-color .1s;
	}

	.list-num {
		position: absolute;
		left: 50%;
		height: 40px;
		transform: translateX(-50%);
	}

	.slide-item {
		flex-shrink: 0;
		border-radius: 4px;
		transition: background-color .1s;
	}

	.empty-none {
		flex-shrink: 0;
		height: 5px;
	}
	.ruler-scroll::-webkit-scrollbar {
	  display: none; /* 隐藏横向滚动条 */
	}
	.ruler-scroll {
	  scrollbar-width: none;   /* Firefox */
	  -ms-overflow-style: none;/* IE/Edge */
	}
</style>
